<template>
    <div class="main">
        <a-form
                id="formLogin"
                class="user-layout-login"
                ref="formLogin"
                :form="form"
                @submit="handleSubmit"
        >
            <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;"
                     message="账户或密码错误"/>
            <a-form-item>
                <a-input
                        size="large"
                        type="text"
                        placeholder="工号"
                        v-decorator="[
                'username',
                {rules: [{ required: true, message: '请输入工号' }], validateTrigger: 'blur'}
              ]"
                >
                    <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
            </a-form-item>

            <a-form-item>
                <a-input
                        size="large"
                        type="password"
                        autocomplete="false"
                        placeholder="密码"
                        v-decorator="[
                'password',
                {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
              ]"
                >
                    <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                </a-input>
            </a-form-item>

            <a-form-item style="margin-top:24px">
                <a-button
                        size="large"
                        type="primary"
                        htmlType="submit"
                        class="login-button"
                        :loading="state.loginBtn"
                        :disabled="state.loginBtn"
                >登 录
                </a-button>
            </a-form-item>

        </a-form>
    </div>
</template>

<script>
    import API from '@/api'
    import {hex_md5} from '@/utils/md5'
    import store from '@/system/store'

    export default {
        data() {
            return {
                isLoginError: false,
                form: this.$form.createForm(this),
                state: {
                    loginBtn: false
                }
            }
        },
        methods: {
            handleSubmit(e) {
                e.preventDefault()
                const {
                    form: {validateFields},
                    state
                } = this

                state.loginBtn = true
                const validateFieldsKey = ['username', 'password']

                validateFields(validateFieldsKey, {force: true}, (err, values) => {
                    if (!err) {
                        const loginParams = {
                            u: values.username,
                            t: hex_md5(values.password)
                        }
                        API.User.Login(loginParams)
                            .then((data) => this.loginProcessor(data))
                    } else {
                        setTimeout(() => {
                            state.loginBtn = false
                        }, 600)
                    }
                })
            },
            loginProcessor(res) {
                if (res && res.data) {
                    this.isLoginError = false
                    store.user = res.data
                    this.$router.push({path: '/' , replace: true})
                }
                else {
                    this.state.loginBtn = false
                    this.isLoginError = true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .user-layout-login {
        label {
            font-size: 14px;
        }

        button.login-button {
            padding: 0 15px;
            font-size: 16px;
            height: 40px;
            width: 100%;
        }
    }
</style>
